<template>
	<Search></Search>
	<view>
		<Swiper :height='400' :swiperData='listData' style="height: 400rpx;"></Swiper>
		<view class="catgread">
			<view class="catgreadChild" v-for="item,index in catgread" @click="pushCatgroy(index)" >
				<image :src="item.image_src"></image>
			</view>
		</view>
		<view v-for="(item,index) in floorData" :key="index" class="floor">
			<view style="height: 60rpx;width:100%;margin-left: 10rpx;">
				<image :src="item.floor_title.image_src" style="height: 100%;width: 100%;"></image>
			</view>
			<view class="floor_bootom">
				<view class="floor_bootom_left">
					<image :src="item.product_list[0].image_src" style="width: 100%;" @click="pushFloor(item.product_list[0].navigator_url.split('?')[1])" ></image>
				</view>
				<view class="floor_bootom_right">
					<view  v-for="item,index in (item.product_list.slice(1))" :key='index'>
					<image :src="item.image_src" style="width: 100%;height: 100%;" @click="pushFloor(item.navigator_url.split('?')[1])"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Swiper from '../../components/Swiper/Swiper.vue'
	import request from '../../request/request.js'
	import easyReq from '../../Tools/EasyReq.js'
	export default {
		data() {
			return {
				listData:[],
				catgread:[],
				floorData:[],
			};
		},
		components:{
			Swiper
		},
		onLoad() {
			this.getSwiperData()
			this.getCategoryData()
			this.getFloorData()
		},
		methods:{
			async getSwiperData(){
				const {data} = await request.get("/api/public/v1/home/swiperdata")
				     if (data.meta.status !== 200) {
				        return uni.showToast({
				          title: '数据请求失败！',
				          duration: 1500,
				          icon: 'none',
				        })
				      }
					  this.listData = data.message
			},
			async getCategoryData(){
				const {data} = await request.get('/api/public/v1/home/catitems')
				if (data.meta.status !== 200)return uni.$showMessage()
				this.catgread = data.message
			},
			async getFloorData(){
				const result = await easyReq('/api/public/v1/home/floordata')
				this.floorData = result
			},
			pushFloor(value){
				console.log(value)
				return
				uni.navigateTo({
					url:'/subpkg/goods_list/goods_list'
				})
			},
			pushCatgroy(index){
				switch(index){
					case 0 :
						uni.switchTab({
							url:'/pages/Cate/Cate'
						})
						break;
					default:
						uni.$showMessage('建设中敬请等待')
				}
				
			}
		}
	}
</script>

<style lang="less">
	.catgread{
		height: 200rpx;
		width: 100%;
		display: flex;
		box-sizing: border-box;
		.catgreadChild{
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			image{
				width: 150rpx;
				height: 160rpx;
			}
		}
	}
	.floor{
		height: 450rpx;
		width: 100%;
		display: flex;
		flex-direction: column;
		margin-top: 20rpx;
		overflow: hidden;
		.floor_bootom{
			display: flex;
			height: 390rpx;
			padding: 0 20rpx;
			.floor_bootom_left{
				flex: 33.3%;
				height: 100%;
				image{
					height: 390rpx;
				}
				padding-right: 10rpx;
			}
			.floor_bootom_right{
				height: 100%;
				flex: 66.6%;
				display: flex;
				flex-wrap: wrap;
				view{
					flex: 45%;
					padding-right: 10rpx;
					display: flex;
					flex-direction: column;
					image{
						flex: 1;
					}
					&:nth-child(n + 3){
						image{
							margin-top: 5rpx;
						}
					}
					&:nth-child(-n + 3){
						image{
							margin-bottom: 5rpx;
						}
					}
				}
				
				
			}
		}
	}
</style>
